<template>
  <!-- 页眉 -->
  <div v-if="pageData && pageData.pageHeaderOption">
    <div v-if="pageData.pageHeaderOption.type === 'text'">
      {{ pageData?.pageHeaderOption?.textContent || "" }}
    </div>
    <Swipe v-else :autoplay="3000" class="my-swipe" indicator-color="white">
      <SwipeItem v-for="(img, k) in pageData.pageHeaderOption.images" :key="k">
        <img :src="img.url" alt="" />
      </SwipeItem>
    </Swipe>
  </div>
  <!-- 标题和简介 -->
  <div class="enroll_top m15">
    <h2 class="f20 t-center">{{ pageData?.enrollConfig?.enrollName }}</h2>
  </div>
  <!-- 问题区域 -->
  <div class="survey_item mb25">
    <!-- 移动端 -->
    <van-form v-if="isMobile">
      <van-cell-group>
        <template v-for="(item, i) in enrollList" :key="i">
          <component
            :is="dom[item.itemType]"
            v-if="!item.hiddenQuestion && !hideQuestionsWithoutOption(item)"
            :item="item"
            type="view"
          ></component>
        </template>
      </van-cell-group>
    </van-form>
    <!-- 电脑端 -->
    <ElForm v-else label-position="top">
      <template v-for="(item, j) in enrollList" :key="j">
        <component
          :is="domPc[item.itemType]"
          v-if="!item.hiddenQuestion && !hideQuestionsWithoutOption(item)"
          :item="item"
          type="view"
        ></component>
      </template>
    </ElForm>
  </div>
  <!-- 返回上一页 -->
  <div v-if="!route.query.id" class="m15 pc_mw150">
    <van-button block type="primary" @click="back">返回</van-button>
  </div>
</template>

<script setup>
import COMPONENTS_h5 from "@/components/components-h5/index";
import COMPONENTS_PC from "@/components/components-pc/index";
import { getFillingDetail } from "@/server/business/enroll.js";
import { commonStore } from "@/stores/common";
import { enrollStore } from "@/stores/enroll";
import { hideQuestionsWithoutOption } from "@/utils/logic";
import { ElForm } from "element-plus";
import { storeToRefs } from "pinia";
import { Swipe, SwipeItem } from "vant";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const store = enrollStore();
const commons = commonStore();
const { isMobile } = storeToRefs(commons);
const { enrollInfo } = storeToRefs(store);
const route = useRoute(); // href获取数据
const router = useRouter();
const enrollList = ref([]);
const pageData = ref({});
const dom = COMPONENTS_h5; // 移动端的组件
const domPc = COMPONENTS_PC; // pc端的组件
const back = () => router.back();
// 缓存拿数据
const getStore = () => {
  enrollList.value = enrollInfo.value?.enrollList?.flat(2);
  pageData.value = enrollInfo.value.pageData;
};
// 从接口拿数据
const getFillingData = () => {
  getFillingDetail({ respondId: route.query.respondId || route.query.id })
    .then(({ data }) => {
      let pageFullData = JSON.parse(data.pageFullData);
      enrollList.value = pageFullData.enrollList.flat(2);
      pageData.value = pageFullData.pageData;
    })
    .catch((error) => console.log(error));
};
// 初始化
const init = () => (route.query.id ? getFillingData() : getStore());
onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.survey_item :deep(.van-field__control--custom) {
  display: block;
}

.my-swipe :deep(.van-swipe-item) {
  color: #fff;
  height: 15rem;
  text-align: center;
  background-color: #39a9ed;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
